<template>
  <div>
    <h1>通知列表</h1>
    <ul>
      <li v-for="notice in notices" :key="notice.noticeId">
        <h2>{{ notice.noticeTitle }}</h2>
        <p>{{ notice.noticeContent }}</p>
        <p>创建人: {{ notice.createBy }} | 创建时间: {{ notice.createTime }}</p>
      </li>
      <button @click="fetchNotices">getNotices</button>
    </ul>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getNotices } from './notice' // 导入通知服务
import type { Notice } from './notice' // 导入通知类型// 定义响应式数据
const notices = ref<Notice[]>([])
const error = ref<string | null>(null)

// 获取通知的函数
const fetchNotices = async () => {
  try {
    const response = await getNotices() // 调用封装的 API 函数
    notices.value = response.rows // 将获取到的数据赋值到 notices
  } catch (err) {
    error.value = '获取通知失败' // 错误处理 console.error(err); // 输出错误日志
  }
}

//组件挂载后获取通知
onMounted(fetchNotices)
</script>

<style scoped>
/* Add your styles here */
</style>
